<template>
    <div class="table">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <span class="container-title-p">
              用户管理
              <i class="iconfont icon-jiantou"></i>
            </span>
            <span>用户审核</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="handle-box">
        <el-select v-model="params.status" placeholder="筛选认证状态" clearable class="handle-select mr10" size="small">
          <el-option label="全部状态" value=""></el-option>
          <el-option v-for="(type_item,index) in typeCenter" :key="index" :label="type_item.name" :value="type_item.id" size="small"></el-option>
        </el-select>
        <el-date-picker
            class="handle-date"
            @change='showSelect'
            v-model="select_date"
            type="datetimerange"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
            </el-date-picker>
        <el-input v-model="params.username" placeholder="筛选：姓名" class="handle-input mr10" style="width:150px;" size="small"></el-input>
        <el-input v-model="params.phone" placeholder="筛选：手机号" class="handle-input mr10" style="width:150px;" size="small"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="applyList" size="small">搜索</el-button>
      </div>
      <el-table :data="userCenter" border style="width: 100%" ref="multipleTable">
        <el-table-column label="头像" align="center">
          <template scope="scope">
            <img :src="scope.row.user.detail.avatar" style="margin-top:5px;width: 80px;height: 80px"/>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop='username' align="center">
          <!-- <template slot-scope="scope">
            {{scope.row.status==0?scope.row.username:scope.row.name}}
          </template> -->
        </el-table-column>
        <el-table-column prop="user.country.chineseName" label="国家" align="center">
        </el-table-column>
        <el-table-column prop="user.phone" label="联系方式" width="130" align="center">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="130" align="center">
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="130" align="center">
          <template slot-scope="scope">
            {{scope.row.status==0?'未审核':scope.row.status==1?"审核通过":'审核未通过'}}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="u_country" label="注册国家" align="center">
        </el-table-column> -->
        <el-table-column label="操作" align="center" width='350'>
          <template scope="scope">
            <el-button size="small" @click="auditDetail(scope.row)">查看详情</el-button>
            <el-button type="danger" v-if='scope.row.status==0' @click="nopass(scope.row)" size='small'>拒 绝</el-button>
            <el-button type="primary" v-if='scope.row.status==0' @click="agress(scope.row)" size='small'>通 过</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :page-size="params.size"
          @current-change ="handleCurrentChange"
          layout="prev, pager, next"
          :total="all_page">
        </el-pagination>
      </div>
      <el-dialog width="30%" title="拒绝理由" :visible.sync="refuseFlag" class="refuse-popup" append-to-body>
          <el-row>
            <el-col :span="24">请输入拒绝理由：</el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入理由" v-model="refuseReason"></el-input>
            </el-col>
          </el-row>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="confirmRefuse(userDetail)" size="small">确 定</el-button>
          </span>
        </el-dialog>
      <el-dialog title="用户审核" :visible.sync="userAuditFlag" class="audit-popup" width="25%">
        <el-row>
          <el-col :span="7">姓名：</el-col>
          <el-col :span="17">{{userDetail.username}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="7">联系方式：</el-col>
          <el-col :span="17">{{userDetail.user.phone}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="7">注册国家：</el-col>
          <el-col :span="17">{{userDetail.user.country.chineseName}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="7">审核状态：</el-col>
          <el-col :span="17">{{userDetail.status==0?'未审核':userDetail.status==1?"审核通过":'审核未通过'}}</el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-col :span="7">备注：</el-col>
          <el-col :span="17">{{userDetail.remark}}</el-col>
          </el-col> 
        </el-row>
        <el-row>
          <el-col :span="7">{{userDetail.type&&userDetail.type==1?'护照':'身份证'}}信息：</el-col>
          <el-col :span='7'>{{userDetail.identityCard}}</el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <img :src="userDetail.identityBack" class="idcard-img" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <img :src="userDetail.identityFront" class="idcard-img" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span='24'>
            <img :src="userDetail.handheldIdentity" class="idcard-img"/> 
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer" v-if="userDetail.status==0">
          <el-button type="danger" @click="refuseFlag=true" size='small'>拒 绝</el-button>
          <el-button type="primary" @click="agress(userDetail)" size='small'>通 过</el-button>
        </span>
        <span v-else slot="footer" class="dialog-footer">
          <el-button type="danger" @click="userAuditFlag=false" size='small'>关闭</el-button>
          <!-- <el-button type="primary" @click="agress(userDetail)" size='small'>通 过</el-button> -->
        </span>
      </el-dialog>
      <loading v-if="loading" :tip='tip'></loading>
    </div>
</template>
<script>
import * as rpConfig from "../../../../rpConfig/constant";
import { HttpReq } from "../../../service/server";
import {api,apiGet,apiPatch} from "@/api/index";
import loading from "@/components/common/loading.vue";
var Server = new HttpReq();
export default {
  data() {
    return {
      select_date:[],
      pickerOptions2: {
          shortcuts: [{
              text: '最近一周',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
              }
          }, {
              text: '最近一个月',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
              }
          }, {
              text: '最近三个月',
              onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
              }
          }]
      },
      tip:'',
      passRemark:'',
      params:{
        page:0,
        size:5,
        status:'',
        startTime:'',
        endTime:'',
        username:'',
        phone:'',
      },
      userDetail:{
        user:{
          country:{},
        }
      },
      loading:false,
      userAuditFlag:false,
      refuseFlag:false,
         userCenter: [
           {
             user:{
               country:{
                 chineseName:''
               }
             }
           }
        // {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息"

        // },
        //     {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息"

        // },
        //     {
        //   u_avatar:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2809576112,626361756&fm=27&gp=0.jpg",
        //   u_name:"昵称",
        //   u_tel:"18817741235",
        //   u_country:"中国",
        //   type_name:"分组",
        //   account_info:"账户信息"

        // }
      ],
      refuseReason:'',
      newsCenter: [],
      cur_page: 1,
      all_page: 1,
      typeCenter: [{
        name:'未审核',
        id:'0'
      },{
        name:'审核通过',
        id:'1',
      },{
        name:'审核未通过',
        id:"2"
      }],
      select_country: "",
      select_word: "",
      startTime: "",
      endTime: ""
    };
  },
  components:{
    loading
  },
  methods: {
    nopass(row){
      this.refuseFlag=true;
      this.userDetail=row;
    },
    showSelect(){
        // //console.log(this.select_date);
        var pecker=[];
        // //console.log(this.select_date);
        if(this.select_date){
          this.select_date.map(item=>{
            var date = item; //日期对象
            var now = "";
            now = date.getFullYear()+"-"; //读英文就行了
            now = now + (date.getMonth()+1)+"-";//取月的时候取的是当前月-1如果想取当前月+1就可以了
            now = now + date.getDate()+" ";
            now = now + date.getHours()+":";
            now = now + date.getMinutes()+":";
            now = now + date.getSeconds()+"";
            // //console.log(now)
            pecker.push(now);
        })
        this.params.startTime=pecker[0];
        this.params.endTime=pecker[1];
        }else{
          this.params.startTime='';
          this.params.endTime='';
        }
    },
    refuse(){
      this.refuseFlag=true;
    },
    agress(row){//通过按钮
      this.loading=true;
      //console.log(row);
      var params={
        remark:'',
        status:1,
      }
      this.tip='通过啦';
      apiPatch.userVerification.apply(row.id+'/check',params).then(res=>{
        console.log(res);
        this.userAuditFlag = false;
        this.loading=false;
        this.applyList();
        if(res.status==200){
          this.$message.success('操作成功！');
        }
      })
    },

    handleCurrentChange(val) {
      this.cur_page = val;
      this.params.page=val-1;
      this.applyList();
    },
    getData() {
      let self = this;
      Server._POST(
        rpConfig.API_URI + "/muser.Index/getUserByCon",
        {
          page: self.cur_page,
          keyword: self.select_word
        },
        function(res) {
          self.newsCenter = res.data.data;
          self.all_page = Math.ceil(res.data.num / res.data.pagesize) * 10;
        }
      );
    },
    setUname(row) {
      return row.u_nickname + "(" + row.u_truename + ")";
    },
    setPosition(row) {
      return row.u_province + "(" + row.u_city + ")";
    },
    auditDetail(row) {
      this.userAuditFlag=true;
      this.userDetail=row;
    },
    confirmRefuse(row){
      // this.userAuditFlag=false;
      if(!this.refuseReason){return this.$message.warning('请输入拒绝理由');}
      this.refuseFlag=false;
      this.loading=true;
      this.tip='没通过';
      var params={
        remark:this.refuseReason,
        status:2
      }
      apiPatch.userVerification.apply(row.id+'/check',params).then(res=>{
        if(res.status==200){
          this.$message.success('操作成功');
        }
        this.userAuditFlag=false;
        this.loading=false;
        this.applyList();
      })
    },
    applyList(){
      this.loading=true;
      this.tip='获取用户列表';
      apiGet.userVerification.apply(this.params).then(res=>{
        this.loading=false;
        //console.log(res);
        this.userCenter=res.content;
        this.all_page=res.totalElements;
      })
    },
  },
  mounted () {
    this.applyList();
  }
};
</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.audit-popup .el-row{
  margin-bottom: 10px;
}
.idcard-img{
  width: 100%;
}
.handle-date{
    width:424px;
    height: 30px;   
    display:inline-block;
    vertical-align:top;
    margin:0 20px 10px 0;
}
.refuse-popup .el-row{
  margin-bottom: 10px;
}
</style>
